<template>
	<view>
		<view class="tabbar">
			<view @click="switch_type('10')" class="item" :class="type == '10' ? 'active' : ''">总榜</view>
			<view @click="switch_type('20')" class="item" :class="type == '20' ? 'active' : ''">本月</view>
			<view @click="switch_type('30')" class="item" :class="type == '30' ? 'active' : ''">近一周</view>
		</view>
		<view class="list">
			<view v-for="(item,index) in rank_list" :key="index" class="item">
				<view class="rank">
					{{index + 1}}
				</view>
				<image :src="item.user_headimg" mode="aspectFill" class="avatar"></image>
				<view class="name">{{item.user_nickname}}</view>
				<view class="count">￥{{item.user_income}}</view>
			</view>
			
			<view class="noContent" v-if="rank_list.length == 0">
			  <image class="noContentImage" mode="widthFix" src="/static/noLive.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				//10:全部，20：本月，30：本周
				type: '10',
				rank_list:[]
			}
		},
		onLoad(options) {
			this.loadData();
		},
		methods: {
			loadData: function(){
				// 加载数据
				var that = this;
				let data = {
					'type': that.type
				};
				this.is_loading = true;
				util.requestPost("api.php/user/rankList", data, function(res) {
					that.rank_list = res.data.rank_list;
				});
			},
			switch_type(type){
				this.type = type;
				this.loadData();
			}
		}
	}
</script>

<style lang="scss">
	page,.page{
		background: #f5f5f5;
		position: relative;
	}
	.tabbar{
		display: flex;
		position: sticky;
		top: 0;
		font-size: 32rpx;
		background: #fff;
		line-height: 92rpx;
		text-align: center;
		color: #000000;
		font-weight: bold;
		z-index: 11;
		.item{
			position: relative;
			flex: 1;
			&.active{
				color: #007AFF;
				&::after{
					content: "";
					display: block;
					position: absolute;
					left: 25%;
					right: 25%;
					bottom: 0;
					height: 6rpx;
					background: currentColor;
				}
			}
		}
	}
	.list{
		.item{
			display: flex;
			align-items: center;
			overflow: hidden;
			padding: 24rpx 0;
			position: relative;
			background: #fff;
			border-radius: 24rpx;
			margin: 24rpx;
			&:first-child{
					.rank{
						background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M303.497846 0h78.158769v186.190769H303.458462V0z m119.276308 0h201.609846v186.190769H422.793846V0z m242.747077 0h78.158769v186.190769h-78.178462V0z' fill='%23EFAE44' %3E%3C/path%3E%3Cpath d='M303.497846 186.190769h78.158769v23.256616H303.458462V186.190769z m119.276308 0h201.609846v23.256616H422.793846V186.190769z m242.747077 0h78.158769v23.256616h-78.178462V186.190769z' fill='%23DA9C35' %3E%3C/path%3E%3Cpath d='M893.991385 615.286154l-90.427077-87.217231v-123.943385c0-22.390154-18.806154-40.566154-42.043077-40.566153h-128.748308l-89.6-86.508308v-67.603692h-61.479385v67.603692l-89.77723 86.606769H262.892308c-23.217231 0-42.043077 18.156308-42.043077 40.566154v123.864615L130.441846 615.266462a39.542154 39.542154 0 0 0 0 57.304615l90.407385 87.236923v123.844923c-0.196923 10.870154 4.155077 21.366154 12.051692 29.144615 7.916308 7.739077 18.707692 12.110769 29.991385 12.11077h128.393846l90.407384 87.236923a43.126154 43.126154 0 0 0 59.411693 0l90.407384-87.236923h128.393847c11.145846 0 21.838769-4.273231 29.735384-11.874462 7.876923-7.620923 12.307692-17.92 12.307692-28.691692v-123.864616l90.407385-87.197538c8.310154-7.424 13.174154-17.762462 13.469539-28.672a39.778462 39.778462 0 0 0-11.835077-29.341538z' fill='%23FFE159' %3E%3C/path%3E%3Cpath d='M256 638.227692c0 134.931692 114.097231 244.342154 254.838154 244.342154 140.740923 0 254.838154-109.410462 254.838154-244.361846 0-134.951385-114.097231-244.361846-254.818462-244.361846C370.077538 393.846154 256 503.256615 256 638.227692z' fill='%23EFAE44' %3E%3C/path%3E%3Cpath d='M503.138462 543.035077h27.726769V768h-36.864v-180.539077c-13.548308 12.288-30.562462 21.425231-51.357539 27.411692v-36.548923a133.632 133.632 0 0 0 32.137846-13.23323c11.342769-6.931692 20.795077-14.178462 28.356924-22.055385z' fill='%23FFFFFF' %3E%3C/path%3E%3C/svg%3E");
						font-size: 0;
					}	
			}
			&:nth-child(2){
				.rank{
					background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M303.497846 0h78.158769v186.190769H303.458462V0z m119.276308 0h201.609846v186.190769H422.793846V0z m242.747077 0h78.158769v186.190769h-78.178462V0z' fill='%23B8B8B8' %3E%3C/path%3E%3Cpath d='M303.497846 186.190769h78.158769v23.256616H303.458462V186.190769z m119.276308 0h201.609846v23.256616H422.793846V186.190769z m242.747077 0h78.158769v23.256616h-78.178462V186.190769z' fill='%23999999' %3E%3C/path%3E%3Cpath d='M893.991385 615.286154l-90.427077-87.217231v-123.943385c0-22.390154-18.806154-40.566154-42.043077-40.566153h-128.748308l-89.6-86.508308v-67.603692h-61.479385v67.603692l-89.77723 86.606769H262.892308c-23.217231 0-42.043077 18.156308-42.043077 40.566154v123.864615L130.441846 615.266462a39.542154 39.542154 0 0 0 0 57.304615l90.407385 87.236923v123.844923c-0.196923 10.870154 4.155077 21.366154 12.051692 29.144615 7.916308 7.739077 18.707692 12.110769 29.991385 12.11077h128.393846l90.407384 87.236923a43.126154 43.126154 0 0 0 59.411693 0l90.407384-87.236923h128.393847c11.145846 0 21.838769-4.273231 29.735384-11.874462 7.876923-7.620923 12.307692-17.92 12.307692-28.691692v-123.864616l90.407385-87.197538c8.310154-7.424 13.174154-17.762462 13.469539-28.672a39.778462 39.778462 0 0 0-11.835077-29.341538z' fill='%23D8D8D8' %3E%3C/path%3E%3Cpath d='M257.161846 640c0 134.951385 114.097231 244.381538 254.838154 244.381538 140.740923 0 254.838154-109.430154 254.838154-244.381538S652.740923 395.618462 512 395.618462c-140.740923 0-254.838154 109.430154-254.838154 244.381538z' fill='%23B8B8B8' %3E%3C/path%3E%3Cpath d='M527.044923 517.139692c21.740308 0 39.699692 6.301538 53.878154 18.904616 13.863385 12.603077 20.795077 28.672 20.795077 48.836923 0 19.534769-7.561846 37.179077-22.055385 53.248-8.822154 9.452308-24.576 21.425231-46.631384 36.233846-23.000615 15.123692-36.864 28.356923-41.905231 39.699692h110.907077v32.452923h-156.908308c0-23.000615 7.246769-42.850462 22.370462-59.864615 8.192-9.452308 25.521231-23.315692 51.672615-41.275077 14.493538-10.082462 24.576-18.589538 30.877538-25.206154 9.767385-11.027692 14.808615-23.000615 14.808616-35.603692 0-12.288-3.465846-21.425231-9.767385-27.411692-6.616615-5.986462-16.384-8.822154-29.302154-8.822154-13.863385 0-24.260923 4.726154-31.192615 14.178461-6.931692 8.822154-10.712615 22.370462-11.342769 40.014769h-36.864c0.315077-25.206154 7.561846-45.371077 22.055384-60.809846 14.808615-16.384 34.343385-24.576 58.604308-24.576z' fill='%23FFFFFF' %3E%3C/path%3E%3C/svg%3E");
					font-size: 0;
				}
			}
			&:nth-child(3){
				.rank{
					background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M149.76 173.76L331.008 322.56V0H149.76v173.76z m258.752 212.48l77.824 64c14.272 13.76 37.12 13.76 51.328 0l77.824-64V0H408.256v386.24h0.256zM693.312 0v322.496l181.184-148.736V0H693.248z' fill='%23ECB49C' %3E%3C/path%3E%3Cpath d='M908.736 524.928c-58.112-42.24-81.664-98.816-70.784-169.152 10.88-70.656-19.456-100.352-90.752-89.856-71.296 10.752-128.384-12.8-171.136-70.144-42.816-57.344-85.568-57.344-128.384 0-42.752 57.344-99.84 80.896-171.136 70.144-71.296-10.752-101.632 19.2-90.752 89.856 10.88 70.592-12.672 126.912-70.784 169.152-58.112 42.24-58.112 84.736 0 126.912 58.112 42.24 81.664 98.816 70.784 169.216-10.88 70.656 19.456 100.288 90.752 89.792 71.296-10.688 128.384 12.8 171.136 70.144 42.816 57.344 85.568 57.344 128.384 0 42.752-57.344 99.84-80.832 171.136-70.144 71.296 10.752 101.632-19.2 90.752-89.792-10.88-70.656 12.672-126.976 70.784-169.216 58.112-42.24 58.112-84.672 0-126.912z' fill='%23E9C5AE' %3E%3C/path%3E%3Cpath d='M252.608 593.28c0 147.712 120.96 267.52 270.208 267.52 149.248 0 270.208-119.744 270.208-267.52 0-147.712-120.96-267.456-270.208-267.52-149.184 0-270.144 119.808-270.208 267.52z' fill='%23B59077' %3E%3C/path%3E%3Cpath d='M516.8 488.704c20.352 0 37.12 4.8 49.536 14.528 12.16 9.792 18.368 23.168 18.368 40.512 0 21.76-11.328 36.288-33.664 43.52 11.904 3.648 21.248 8.96 27.456 16.256 6.784 7.552 10.24 17.28 10.24 29.056a58.112 58.112 0 0 1-19.584 45.248c-13.568 11.968-31.36 18.112-53.504 18.112-20.928 0-37.888-5.312-50.56-15.936-14.208-11.712-22.144-28.992-23.808-51.328h33.664c0.576 12.8 4.48 22.848 12.416 29.824 7.04 6.4 16.448 9.792 28.032 9.792 12.736 0 22.912-3.648 30.272-10.624a32 32 0 0 0 9.92-23.68c0-11.52-3.712-19.84-10.496-25.152-6.784-5.632-16.64-8.128-29.696-8.128h-14.144v-24.576h14.144c11.904 0 20.928-2.56 27.136-7.552 5.952-4.992 9.088-12.544 9.088-22.336 0-9.728-2.816-17.024-8.192-22.016-5.952-5.056-14.72-7.552-26.304-7.552-11.904 0-20.992 2.752-27.52 8.64-6.72 5.888-10.688 14.784-11.84 26.816h-32.512c1.664-20.096 9.024-35.776 22.592-46.912 12.8-11.2 29.184-16.512 48.96-16.512z' fill='%23FFFFFF' %3E%3C/path%3E%3C/svg%3E");
					font-size: 0;
				}
			}
		}
		.avatar{
			width: 100rpx;
			height: 100rpx;
			border-radius: 100px;
			margin-right: 32rpx;
		}
		.rank{
			flex-basis: 100rpx;
			text-align: center;
			background-size: 56rpx auto;
			background-repeat: no-repeat;
			background-position: center center;
			padding: 32rpx 0;
		}
		.name{
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.count{
			flex-basis: 160rpx;
			text-align: center;
			color: #ffaa00;
		}
		
	}
</style>
